<%@ include file="/WEB-INF/controllers/configuration/includes.jsp"%>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<div id="contentsChart">
	<div class="contenedorFiltro" id="filtroNews">
		<form:form id="pagformularioFiltroNews" method="POST"
			action="listNews.do" modelAttribute="dtoDashboard">
			<h1 class="titulo1" id="tituloChart">
				<spring:message code="label.title.timeline" />
			</h1>
			<div id="inputDatePicker">

				<div id="inputFrom">
					<label for="from">From: </label> <input type="text" id="from"
						name="from" />
				</div>
				<div id="inputTo">
					<label for="to">to: </label> <input type="text" id="to" name="to" />
				</div>
				<div id="botones" style="display:inline-block;">
					<div id="divMostrar" style="display:inline-block;">
						<input type="button" onclick="startGettingTweets()" value="Mostrar" />
					</div>
					<div id="divStop" style="display:inline-block;">
						<input type="button" onclick="stopGettingTweets()" value="Stop" />
					</div>
				</div>
			</div>
		</form:form>
	</div>
</div>
<div id="divTimeline">
</div>
<script type="text/javascript">
	var defaultDateFrom = '-4w';
	var defaultDateTo = '0';
	var pageSelected = 0;
	var refreshIntervalId;

	$.ajaxSetup({
		statusCode : {
			403 : function() {
				window.location = '<c:url value="login.do"/>';
			}
		},
		// 	type: 'POST',    
		headers : {
			"cache-control" : "no-cache"
		}
	});

	$(function() {
		$("#from").datepicker({
			defaultDate : defaultDateFrom,
			changeMonth : true,
			numberOfMonths : 1,
			onClose : function(selectedDate) {
				$("#to").datepicker("option", "minDate", selectedDate);
				$("#from").datepicker("option", "setDate", $("#from").val());
			},
		});
		$("#to").datepicker({
			defaultDate : defaultDateTo,
			inline : true,
			changeMonth : true,
			numberOfMonths : 1,
			dateformat : "dd/mm/yy",
			onClose : function(selectedDate) {
				$("#from").datepicker("option", "maxDate", selectedDate);
				$("#to").datepicker("option", "setDate", $("#to").val());
			}
		});
		$('#from').datepicker('setDate', defaultDateFrom);
		$('#to').datepicker('setDate', defaultDateTo);

		// 	    $(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });
	});
	
	function startGettingTweets() {
		pageSelected = 0;
		refreshIntervalId = setInterval(function() {getTweets();},4000);
	}
	
	function stopGettingTweets() {
		clearInterval(refreshIntervalId);
	}

	function getTweets() {
		var selectedFrom = $('#from').datepicker('getDate').getTime();
		var selectedTo = $('#to').datepicker('getDate').getTime();

		$.ajax({
			url : '<c:url value="timeline.do"/>',
			type : "POST",
			dataType : "json",
			data : {
				start_date : selectedFrom,
				end_date : selectedTo,
				page : pageSelected
			},
			timeout : 400000,
			error : function(request, error) {
				alert('Se ha producido un error.');
			},
			success : successTimeline
		});
		pageSelected++;
	}

	function successTimeline(json) {
		
		$('.tweet').remove();
		var lstDTOTweet = json.lstDTOTweet;
		for (var i=0;i<lstDTOTweet.length;i++) {
			var tweet = lstDTOTweet[i];
			$('#divTimeline').append('<div id="'+tweet.id+'" class="tweet"><p>'+tweet.publishDate+'</p> <p>'+parseUser(tweet.username,'Twitter')+': </p><p>'+parseText(tweet.text,'Twitter')+'</p></div>');
		}
	}
</script>